<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24" ref="hMain">
        <div class="head-container" :style="{height: treeHeight+'px'}" style="overflow: auto">
          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" ref="tree" node-key="id"
                   default-expand-all highlight-current @node-click="handleNodeClick" :filter-node-method="filterNode"
                   :default-expanded-keys="expandedkeys" :current-node-key="currentNodekey" :style="isSize">
            <template slot-scope="{ node, data }">
              <span class="span-ellipsis" :title="node.label" :style="isSize">{{ node.label }}</span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <!--接收管理数据-->
      <el-col :span="20" :xs="24" v-show="isShow">
        <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch"
                 label-width="68px">
          <el-form-item label="资料名" prop="genName">
            <el-input v-model="queryParams.genName" placeholder="请输入资料名" style="width: 240px" clearable/>
          </el-form-item>
          <el-form-item label="日期" prop="dateRange">
            <el-date-picker v-model="dateRange" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关键字" prop="keywords">
            <el-input v-model="queryParams.keywords" placeholder="请输入关键字" style="width: 240px" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" @click="handledeitTap(0)">著录</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="el-icon-edit" @click="handledeitTap(1)">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" @click="handleDeleteTap">删除</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :height="tableHeight > 600 ? 600 : tableHeight" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" @row-dblclick="rowdblclick">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="序号" sortable align="center" type="index" prop="id" />
          <el-table-column label="资料号" align="center" prop="genNum" :show-overflow-tooltip="true" />
          <el-table-column label="资料名" align="center" prop="genName" :show-overflow-tooltip="true" />
          <el-table-column label="册数" align="center" prop="volumeNum" :show-overflow-tooltip="true" />
          <el-table-column label="出版单位" align="center" prop="publishUnit" :show-overflow-tooltip="true" />
          <el-table-column label="作者" align="center" prop="author" :show-overflow-tooltip="true" />
          <el-table-column label="出版时间" align="center" prop="publishData" :show-overflow-tooltip="true" />
          <el-table-column label="控制属性" align="center" prop="controlType" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-for="(i, idx) in dict.type.CONTROLTYPE" :key="idx">
                {{ scope.row.controlType == i.value ? i.label : '' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column label="资料状况" align="center" prop="genStatus" :show-overflow-tooltip="true" />
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
      </el-col>

      <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
        <el-empty :image-size="200"></el-empty>
      </el-col>
    </el-row>

    <!-- 卷著录/修改 start -->
    <Juanedit v-if="juanOpen" :open="juanOpen" :openInfo="openInfo" @closeDelDialog="closeDelDialog"
              @submitDetail="submitDetail"></Juanedit>
    <!-- 卷著录/修改 end -->

    <!-- 卷详情 start -->
    <JuanDetail v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
                @detailsHandleClose="detailsHandleClose"></JuanDetail>
    <!-- 卷详情 end -->
  </div>
</template>

<script>
import {getTreeList} from "@/api/information/applicationManagement/dataTreeManagement";
import {deleteFolder, getFolderList} from "@/api/information/receivingManagement";
import Juanedit from "@/views/information/receivingManagement/juanedit";
import JuanDetail from "@/views/information/receivingManagement/juanDetail";
import estimateTableHeight from "@/mixins/estimateTableHeight";

export default {
  name: "index",
  archive_Dicts: ['CONTROLTYPE'],
  components: {JuanDetail, Juanedit },
  mixins: [estimateTableHeight], // 混入方法
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      //默认展开的树节点
      expandedkeys: [],
      //默认选中的树节点
      currentNodekey: "",
      isShow: false, //是否显示右侧数据 isShow:true,
      // 显示搜索条件
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        genName: undefined,
        keywords: undefined
      },
      dateRange: undefined,
      loading: true,
      total: 0,
      dataList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      openInfo: {},
      // 卷著录
      juanOpen: false,
      text: "操作成功",
      juanDetailsOpen: false,//卷详情弹窗
      celldbData: {}
    }
  },
  computed: {
    isSize() {
      if (this.$store.getters.size == 'small') {
        this.size = 'font-size: 12px;'
      } else {
        this.size = 'font-size: 14px;'
      }
      return this.size
    }
  },
  created() {
    this.getDeptTree()
  },
  methods: {
    /** 查询树结构 */
    getDeptTree() {
      this.deptOptions = []
      getTreeList().then(response => {
        const rootNode = { id: 'root', label: '馆藏资料', children: [] };
        const otherNodes = response.rows.map(item => {
          return {
            id: item.id,
            label: item.dataName + '(' + item.dataCode + ')',
            treeCode: item.dataCode
          }
        })
        rootNode.children = otherNodes;
        this.deptOptions.push(rootNode)
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data)
      if (data.id == 'root') {
        this.isShow = false
      } else {
        this.isShow = true
      }
      this.queryParams.treeId = data.id
      this.queryParams.treeCode = data.treeCode
      this.getList()
    },
    // 搜索按钮
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.dateRange != null) {
        this.queryParams['params["beginPublishData"]'] = this.dateRange[0];
        this.queryParams['params["endPublishData"]'] = this.dateRange[1];
      } else {
        this.queryParams['params["beginPublishData"]'] = undefined;
        this.queryParams['params["endPublishData"]'] = undefined;
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams['params["beginPublishData"]'] = undefined;
      this.queryParams['params["endPublishData"]'] = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList() {
      this.loading = true
      getFolderList(this.queryParams).then(response=>{
        this.dataList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 著录/修改
    handledeitTap(e) {
      this.openInfo = {
        treeId: this.queryParams.treeId,
        treeCode: this.queryParams.treeCode,
      }
      if (e == 1) {  //修改
        if (this.ids == undefined) {
          this.$message({ message: '请选择要修改的数据哦', type: 'warning' })
          return false
        }
        if (this.single) {
          this.$message({ message: '请选择一条要修改的数据哦', type: 'warning' })
          return false
        }
        this.openInfo.ids = this.ids.toString(); //资料Id;
        this.juanOpen = true;
      } else { //添加
        this.openInfo.ids = undefined
        this.juanOpen = true;
      }
    },
    // 删除
    handleDeleteTap() {
      if (this.ids != undefined && !this.multiple) {
        var ids = this.ids
        this.$modal.confirm('是否确认删除所选数据项？').then(function () {
        }).then(() => {
          deleteFolder(ids).then(res=>{
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
        })
      } else {
        this.$message({ message: '请选择要删除的数据哦', type: 'warning' })
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    submitDetail() {
      this.jianOpen = false;
      this.juanOpen = false //卷
      this.getList()
    },
    //关闭著录
    closeDelDialog() {
      this.juanOpen = false //卷
      this.getList()
    },

    // 双击查看详情
    rowdblclick(row) {
      const tableColumns = [
        { label: '资料号', prop: 'genNum' },
        { label: '资料名', prop: 'genName' },
        { label: '册数', prop: 'volumeNum' },
        { label: '出版单位', prop: 'publishUnit' },
        { label: '作者', prop: 'author' },
        { label: '出版时间', prop: 'publishData' },
        { label: '控制属性', prop: 'controlType' },
        { label: '备注', prop: 'remark' },
        { label: '资料状况', prop: 'genStatus' },
      ]
      for (let i = 0; i < tableColumns.length; i++) {
        tableColumns[i].value = row[tableColumns[i].prop]
      }
      console.log(row, tableColumns)
      this.celldbData = row
      this.celldbData.tableColumns = tableColumns
      this.$nextTick(() => {
        this.juanDetailsOpen = true
      })
    },
    //关闭详情页面
    detailsHandleClose() {
      this.juanDetailsOpen = false;
    },
  }
}
</script>

<style scoped>

</style>
